<template>
  <div class="login_signin_box" style="">
    <div class="logo" @click="$router.push('/')">
      <img
        src="http://175.178.92.128:8087/campus_help_system/images/logo/logo1.png"
        height="80px"
        alt=""
      />
    </div>
    <div class="form_mian">
      <div class="left">
        <p>用科技</p>
        <div>让复杂的世界更简单</div>
      </div>
      <div class="right">
        <div
          class="signin_box is_false"
          v-show="is_login"
          :class="is_login ? 'is_true' : ''"
        >
          <div class="new_login">
            <h3>欢迎注册</h3>
            <p>已有帐号？ <span @click="is_login = !is_login"> 登录 </span></p>
          </div>
          <div class="form_box">
            <el-form ref="form" :model="form" label-width="85px">
              <el-form-item label="学号：">
                <el-input
                  v-model="form.userNo"
                  placeholder="请输入学号"
                ></el-input>
              </el-form-item>
              <el-form-item label="姓名：">
                <el-input
                  v-model="form.userName"
                  placeholder="请输入姓名"
                ></el-input>
              </el-form-item>
              <el-form-item label="专业：">
                <el-input
                  v-model="form.professional"
                  placeholder="请输入专业"
                ></el-input>
              </el-form-item>
              <el-form-item label="班级：">
                <el-input
                  v-model="form.classes"
                  placeholder="请输入班级"
                ></el-input>
              </el-form-item>
              <el-form-item label="手机号：">
                <el-input
                  v-model="form.telephone"
                  placeholder="请输入手机号"
                ></el-input>
              </el-form-item>
              <el-form-item label="密码：">
                <el-input
                  v-model="form.password"
                  placeholder="请输入密码"
                  show-password
                ></el-input>
              </el-form-item>
            </el-form>
          </div>
          <div class="btn">
            <el-button type="primary" round @click="clickSignin">
              注册
            </el-button>
            <el-button round @click="is_login = !is_login"> 去登录 </el-button>
          </div>
        </div>
        <div
          class="login_box is_false"
          v-show="!is_login"
          :class="!is_login ? 'is_true' : ''"
        >
          <div class="new_login">
            <h3>欢迎登录</h3>
            <p>没有帐号？ <span @click="is_login = !is_login"> 注册 </span></p>
          </div>
          <div class="form_box">
            <el-form ref="form" :model="form" label-width="85px">
              <el-form-item label="手机号：">
                <el-input
                  v-model="form.telephone"
                  placeholder="请输入手机号"
                ></el-input>
              </el-form-item>
              <el-form-item label="密码：">
                <el-input
                  v-model="form.password"
                  placeholder="请输入密码"
                  show-password
                ></el-input>
              </el-form-item>
            </el-form>
          </div>
          <div class="btn">
            <el-button type="primary" round @click="clickLogin">
              登录
            </el-button>
            <el-button round @click="is_login = !is_login"> 去注册 </el-button>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import { getAddSignin, getqueryTelephoneLogin } from "@/util/users.js";
export default {
  data() {
    return {
      // 表单字段
      form: {
        userNo: "",
        userName: "",
        professional: "",
        classes: "",
        telephone: "",
        password: "",
      },
      // 控制登录注册 true为注册，false为登录
      is_login: true,
    };
  },
  watch: {
    // 监听是否切换注册登录 清空数据
    is_login() {
      this.form.userNo = "";
      this.form.userName = "";
      this.form.professional = "";
      this.form.classes = "";
      this.form.telephone = "";
      this.form.password = "";
    },
  },
  created() {
    // 初始化 获取state 值为1是点击注册
    console.log(this.$route.query);
    if (this.$route.query.state == 1) {
      this.is_login = false;
    }
  },
  mounted() {},
  methods: {
    // 注册
    async clickSignin() {
      // 注册数据判空
      if (this.isSigninAndLoginData(this.is_login)) {
        return;
      }
      // 注册请求
      let { data: res } = await getAddSignin(this.form);
      if (res.status != 2000) {
        return this.$message.error(res.msg);
      }
      this.$message.success(res.data);
      this.is_login = true;
    },
    // 登录
    async clickLogin() {
      // 登录数据判空
      if (this.isSigninAndLoginData(this.is_login)) {
        return;
      }
      // 登录请求
      let { data: res } = await getqueryTelephoneLogin(this.form);
      if (res.status != 2000) {
        return this.$message.error(res.msg);
      }

      // 用户数据保存在本地 localStorage
      window.localStorage.setItem("id", res.data.id);
      window.localStorage.setItem("userNo", res.data.userNo);
      window.localStorage.setItem("userName", res.data.userName);
      window.localStorage.setItem("role", res.data.role);
      window.localStorage.setItem("created_at", res.data.created_at);
      window.localStorage.setItem("professional", res.data.professional);
      window.localStorage.setItem("classes", res.data.classes);
      window.localStorage.setItem("telephone", res.data.telephone);
      window.localStorage.setItem("password", res.data.password);
      window.localStorage.setItem("images", res.data.imagesUrl);
      this.$store.commit("getImageTab", res.data.imagesUrl);

      this.$message.success("登录成功");
      // 登录成功 去首页
      this.$router.push("/");
    },
    // 注册判空
    isSigninAndLoginData(e) {
      console.log(e);

      if (e) {
        if (this.form.userNo == "" || this.form.userNo == null) {
          this.$message.error("请输入学号");
          return true;
        }
        if (this.form.userName == "" || this.form.userName == null) {
          this.$message.error("请输入姓名");
          return true;
        }
        if (this.form.professional == "" || this.form.professional == null) {
          this.$message.error("请输入专业");
          return true;
        }
        if (this.form.classes == "" || this.form.classes == null) {
          this.$message.error("请输入班级");
          return true;
        }
        if (this.form.telephone == "" || this.form.telephone == null) {
          this.$message.error("请输入手机号");
          return true;
        }
        if (this.form.password == "" || this.form.password == null) {
          this.$message.error("请输入密码");
          return true;
        }
      } else {
        if (this.form.telephone == "" || this.form.telephone == null) {
          this.$message.error("请输入手机号");
          return true;
        }
        if (this.form.password == "" || this.form.password == null) {
          this.$message.error("请输入密码");
          return true;
        }
      }
      return false;
    },
  },
};
</script>
<style lang="less" scoped>
.login_signin_box {
  height: 100vh;
  width: 100%;
  background-image: url(http://175.178.92.128:8087/campus_help_system/images/reg_bg_min.jpg);
  background-repeat: no-repeat;
  background-size: auto 120%;
  background-position: center center;
  padding: 50px 100px 100px 50px;
  position: relative;
  .logo {
    cursor: pointer;
  }
  .form_mian {
    .left {
      position: absolute;
      left: 230px;
      top: 36%;
      transform: translate(0, -50%);
      color: #fff;
      p {
        font-size: 54px;
        letter-spacing: 0;
        font-weight: 700;
        color: #fff;
        margin-bottom: 12px;
      }
      div {
        font-size: 32px;
        letter-spacing: 3.81px;
        font-weight: 300;
        color: #fff;
      }
    }
    .right {
      position: absolute;
      right: 140px;
      top: 50%;
      transform: translate(0, -50%);
      width: 480px;
      //   height: 680px;
      background: rgba(255, 255, 255, 0.9);
      border-radius: 12px;
      padding: 50px 42px;
      .is_false {
        transform: rotate(-180deg);
        transition: transform 1s;
      }
      .is_true {
        transform: rotate(0deg);
        transition: transform 1s;
      }

      .new_login {
        margin-bottom: 40px;
        h3 {
          font-size: 36px;
          color: #000;
          padding-bottom: 4px;
          font-weight: 700;
        }
        p {
          font-size: 14px;
          color: #9b9b9b;
          span {
            color: #0166b6;
            cursor: pointer;
          }
        }
      }
      .form_box {
        /deep/.el-form-item__label {
          font-size: 18px;
        }
      }
      .btn {
        display: flex;
        flex-direction: column;
        .el-button {
          margin-bottom: 16px;
          margin-left: 0;
        }
      }
    }
  }
}
</style>
